<template>
  <div class="dataBigScreenContainer" ref="dataBigScreenContainerRef" @click="toggleScreenChange">
    <!-- 加载中 -->
    <div class="loading" v-if="isLoading">
      <div class="load-box">
        <img src="@/assets/images/screen/loading.gif" /> 页面加载中...
      </div>
    </div>
    <!-- 加载完成 -->
    <div class="main-box" v-else>
      <!-- 头部区域 -->
      <div class="headerSection" ref="headRef" v-show="isShowHeader">
        <!-- 上半部分 -->
        <div class="head_t">
          <span>智慧物联网边缘计算指挥大屏</span>
          <p><dataHeadSvg class="dataHeadSvg"></dataHeadSvg></p>
        </div>
        <!-- 下半部分 -->
        <div class="head_b flex_between">
          <div class="head_b_left">
            <div class="between-item-1">
              <div class="content">Eternity - 陈波 - 前端开发工程师</div>
            </div>
            <div class="around-item-1">
              <BasicDateTime 
                class="content"
                :isShowWeekDay="false"
                fz="0.7rem"
              />
            </div> 
          </div>

          <div class="head_b_right">
            <div class="around-item-2">
              <div class="content">Today is</div>
              <BasicDateTime
                class="content weekDay"
                fz="0.7rem"
                :isShowDate="false"
                :isShowTime="false"
              />
            </div>
            <div class="between-item-2">
              <!-- <div class="content">坚持数智驱动创新，打造行业智能制造标杆示范工厂</div> -->
              <div class="content">Data Dashboard - TD3</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 图表区域 -->
      <div class="bodySection">
        <transition name="fade" mode="out-in">
          <keep-alive>
            <component :is="currentComMark == '3D' ? index3D: index2D" />
          </keep-alive>
        </transition>
      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, shallowRef, onBeforeUnmount } from 'vue';
import { showLoading, hideLoading } from '@/request/http'
// svg
import dataHeadSvg from '@/assets/images/svg/dataHead.svg'
// components
import index3D from './components/3D/index3D.vue';
import index2D from './components/2D/index2D.vue';
// api
import dataSourceApi from '@/request/api/dataSource';
// store
import useDataScreen from '@/store/dataScreen';

const dataScreenStore = useDataScreen();

let isLoading = ref<boolean>(true);
type TDeviceNum = 10 | 20 | 40 | 60 | 80 | 100;
let deviceNum = ref<TDeviceNum>(10);
// no_lstm
const deviceNums: TDeviceNum[] = [10, 20, 40, 60, 80, 100];
// lstm
const deviceNumsLstm: number[] = [20, 40, 60, 80, 100];
let map = new Map();
// 保存accuracy、energy和penalty
const requestAccuracyEnergy = async () => {
  // 循环发送参数请求no_lstm
  for (const count of deviceNums) {
    try {
      // 使用 await 确保按顺序执行每个请求
      const resNoLSTM = await dataSourceApi.getDoneTD3NoLSTM({
        count: count
      });
      // 将结果保存到 map 中
      map.set(`accuracy${count}_NoLSTM`, resNoLSTM.accuracy.flat());
      map.set(`energy${count}_NoLSTM`, resNoLSTM.energy.flat(2));
      map.set(`penalty${count}_NoLSTM`, resNoLSTM.penalty.flat());
      dataScreenStore.setTD3Map(map);
    } catch (error) {
      console.error(`Error fetching data for count ${count}:`, error);
    }
  }


  // 循环发送参数请求lstm
  for (const count of deviceNumsLstm) {
    try {
      // 使用 await 确保按顺序执行每个请求
      const resLSTM = await dataSourceApi.getDoneTD3LSTM({
        count: count
      });
      // 将结果保存到 map 中
      map.set(`accuracy${count}_LSTM`, resLSTM.accuracy);
      map.set(`energy${count}_LSTM`, resLSTM.energy);
      map.set(`penalty${count}_LSTM`, resLSTM.penalty);
      dataScreenStore.setTD3Map(map);
    } catch (error) {
      console.error(`Error fetching data for count ${count}:`, error);
    }
  }
};

// 保存rewards
const requestRewards = async () => {
  const resNoLSTM = await dataSourceApi.getDoneTD3NoLSTMRewards();
  const resLSTM = await dataSourceApi.getDoneTD3LSTMRewards();
  map.set(`rewards40_NoLSTM`, resNoLSTM.rewards);
  map.set(`rewards40_LSTM`, resLSTM.rewards);
  dataScreenStore.setTD3Map(map);
  isLoading.value = false;
  // setTimeout(() => {
  //   isLoading.value = false;
  // }, 2000)
};

let isShowHeader = ref<boolean>(true);
onMounted(() => {
  document.addEventListener('fullscreenchange', (event) => {
    if (document.fullscreenElement) {
      // 处理进入全屏模式的逻辑
      // isShowHeader.value = false;
      console.log('全屏 -- 进入')
    } else {
      // 处理退出全屏模式的逻辑
      // isShowHeader.value = true;
      console.log('全屏 -- 退出')
    }
  });
  requestAccuracyEnergy();
  setTimeout(() => {
    requestRewards()
  }, 100)
})

const dataBigScreenContainerRef = ref<HTMLDivElement | null>(null);
const toggleScreenChange = () => {
  // if(dataBigScreenContainerRef.value == document.fullscreenElement) {
  //   document.exitFullscreen();
  //   isShowHeader.value = true;
  //   return;
  // }
  // dataBigScreenContainerRef.value.requestFullscreen();
  // isShowHeader.value = false;
}

let nowCom = ref(shallowRef(index3D));
console.log('nowCom.value.name', nowCom.value.__name)

let currentComMark = ref<string>('3D')

const handleKeyPress = (event: KeyboardEvent) => {
  if (event.key === 'ArrowLeft' && currentComMark.value != '3D') {
    // 往左切3D模式
    currentComMark.value = '3D';
  } 
  if (event.key === 'ArrowRight' & currentComMark.value != '2D') {
    // 往右切2D模式
    currentComMark.value = '2D';
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeyPress);
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeyPress);
})

watch(() => isShowHeader.value, (val) => {
  const commonSs = document.querySelectorAll('.commonS');
  let value = val ? '30vh' : '33.33vh';
  commonSs.forEach(item => {
    item.style.height = value;
  })
})

</script>

<style scoped lang="scss">
.dataBigScreenContainer {
  height: 100vh;
  // background-image: url('@/assets/images/screen/bg.jpg');
  background-image: url('https://pcms.huashijc.com/static/img/pageBg.f9f9dcd5.png');
  // background-image: url('@/assets/images/screen/dynamic-bg.gif');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.main-box {
  color: #fff;
  // 头部区域
  .headerSection {
    // border: 1px solid red;
    height: 10vh;
    .head_t {
      height: 50%;
      background-image: url('@/assets/images/screen/head_bg.png');
      background-size: 100% 100%;
      text-align: center;
      line-height: 2rem;
      font-size: 1.5rem;
      .dataHeadSvg {
        // border: 1px solid red;
        width: 15rem;
        height: 2rem;
      }
    }
    .head_b {
      margin-top: .2rem;
      height: 50%;
      // border: 1px solid white;
      .head_b_left {
        position: relative;
        left: 0;
        width: 50%;
        height: 100%;
        // border: 1px solid red;
        .between-item-1 {
          position: absolute;
          left: -2rem;
          width: 50%;
          height: 4.5vh;
          background-color: rgb(15, 19, 37);
          transform: skew(50deg);
          line-height: 4.5vh;
          // padding-left: 2.5rem;
          text-align: center;
          font-size: 0.9rem;
          .content {
            transform: translateX(-10%) skew(-50deg);
          }
        }
        .around-item-1 {
          position: absolute;
          left: 25rem;
          width: 30%;
          // padding-left: 3rem;
          text-align: center;
          height: 4.5vh;
          background-color: rgb(15, 19, 37);
          transform: skew(50deg);
          line-height: 4.5vh;
          .content {
            transform: skew(-50deg);
          }
        }
      }

      .head_b_right {
        position: relative;
        right: 0;
        width: 50%;
        height: 100%;
        // border: 1px solid red;
        overflow: hidden;
        .between-item-2 {
          position: absolute;
          right: -2rem;
          width: 50%;
          height: 4.5vh;
          background-color: rgb(15, 19, 37);
          transform: skew(-50deg);
          line-height: 4.5vh;
          text-align: center;
          font-size: 0.9rem;
          .content {
            transform: translateX(-10%) skew(50deg);
          }
        }
        .around-item-2 {
          position: absolute;
          right: 25rem;
          width: 30%;
          padding-left: 3rem;
          height: 4.5vh;
          background-color: rgb(15, 19, 37);
          transform: skew(-50deg);
          line-height: 4.5vh;
          font-size: 0.9rem;
          .content {
            position: absolute;
            transform: skew(50deg);
            font-size: 0.8rem;
            &.weekDay {
              left: 6.5rem;
            }
          }
        }
      }


    }
  }
  // 图表内容区域
  .bodySection {
    // border: 1px solid red;
    width: 100%;
  }
}

/** 加载动画 -- 开始 */
.loading {
  position: fixed;
  left: 0;
  top: 0;
  font-size: 18px;
  z-index: 100000000;
  width: 100%;
  height: 100%;
  background: url('https://pcms.huashijc.com/static/img/pageBg.f9f9dcd5.png') center top;
  background-size: cover;
  text-align: center;
  color: #fff;
}

.load-box {
  position: absolute;
  width: 160px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -75px;
  img {
    margin: 10px auto;
    display: block;
    width: 40px;
  }
}
/** 加载动画 -- 结束 */

/* 渐变设置 */
.fade-enter-from, .fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
.fade-enter-active {
  transition: all 0.7s ease;
}
.fade-leave-active {
   transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>